// import React, {useCallback, useMemo, useState, useReducer, useContext, useEffect, useLayoutEffect, useRef, useImperativeHandle} from 'react';
import React,{useCallback, useMemo, useState, useReducer, useEffect, useLayoutEffect, useRef, useImperativeHandle} from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';


/*function Child(props,ref){

  return <input type="text" ref={ref}/>;
}

const ForwardRefChild = React.forwardRef(Child);

function Parent(props){
  const [count, setCount] = useState(0);

  const childRef = React.createRef(); //函数组件执行后就销毁了 如果直接在 <Child ref={ChildRef}/>, 是不被允许的.  推荐使用 forwardRef对函数组件先进行包裹

  const getFocus = () => {
    childRef.current.focus();
    //childRef.current.remove(); //父组件可以直接干掉儿子 很危险
  };

  return (
    <div>
      {/!*<Child ref={ChildRef}/>*!/}
      <ForwardRefChild ref={childRef}/>
      <button onClick={getFocus}>获取焦点</button>

      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}*/



//儿子只想要父亲能获取到焦点, 但不能干其它的

function Child(props,childRef){
  const inputRef = React.createRef();
  const x = useImperativeHandle(childRef,()=>(
    {
      focus(){
        inputRef.current.focus();
      }
    }
  ));

  return <input type="text" ref={inputRef}/>;
}

const ForwardRefChild = React.forwardRef(Child);

function Parent(props){
  const [count, setCount] = useState(0);

  const childRef = React.createRef();

  const getFocus = () => {
    childRef.current.focus();
    childRef.current.remove(); //父组件可以直接干掉儿子 很危险 // 使用useImperativeHandle后 点击会报： Uncaught TypeError: childRef.current.remove is not a function
  };

  return (
    <div>
      <ForwardRefChild ref={childRef}/>
      <button onClick={getFocus}>获取焦点</button>

      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

ReactDOM.render(<Parent/>, document.getElementById('root'));
